{% extends 'base.html' %}
{% load static %}

{% block title %}支付订单 - 商城系统{% endblock %}

{% block extra_css %}
<style>
    .payment-container {
        background-color: #f8f9fa;
        padding: 40px 0;
        min-height: 70vh;
    }
    
    .payment-card {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,.1);
        padding: 30px;
        margin-bottom: 20px;
    }
    
    .payment-title {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 20px;
        color: #333;
        position: relative;
        padding-bottom: 10px;
    }
    
    .payment-title:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50px;
        height: 2px;
        background-color: #0d6efd;
    }
    
    .payment-amount {
        font-size: 24px;
        color: #e4393c;
        font-weight: 600;
        margin: 20px 0;
    }
    
    .payment-qrcode {
        width: 400px;
        height: 400px;
        margin: 30px auto;
        padding: 15px;
        border: 1px solid #ddd;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .payment-qrcode img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    
    .payment-instruction {
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 5px;
        margin: 20px 0;
    }
    
    .payment-timer {
        margin: 15px 0;
        font-size: 16px;
    }
    
    .timer-text {
        color: #e4393c;
        font-weight: 600;
    }
    
    .payment-actions {
        margin-top: 20px;
    }
    
    /* 支付方式选择样式 */
    .payment-method-selector {
        margin-bottom: 20px;
    }
    
    .payment-method {
        display: block;
        border: 1px solid #e0e0e0;
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 10px;
        cursor: pointer;
        transition: all .2s ease;
    }
    
    .payment-method:hover {
        border-color: #aaa;
    }
    
    .payment-method.selected {
        border-color: #0d6efd;
        background-color: #f0f7ff;
    }
    
    .payment-method-icon {
        font-size: 24px;
        margin-right: 10px;
        color: #666;
    }
    
    .payment-method.selected .payment-method-icon {
        color: #0d6efd;
    }
</style>
{% endblock %}

{% block content %}
<div class="payment-container">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="payment-card">
                    <h2 class="payment-title">订单支付</h2>
                    
                    <div class="text-center mb-4">
                        <p class="text-muted">请支付订单金额</p>
                        <div class="payment-amount">¥{{ order.actual_amount }}</div>
                        <p class="text-muted small">订单号: {{ order.order_id }}</p>
                    </div>
                    
                    <!-- 支付方式选择 -->
                    <div class="payment-method-selector">
                        <h5 class="mb-3">选择支付方式</h5>
                        
                        <form id="paymentMethodForm" method="post" action="{% url 'update_payment_method' order_id=order.order_id %}">
                            {% csrf_token %}
                            <label class="payment-method {% if order.pay_method == 'alipay' %}selected{% endif %}" data-payment="alipay">
                                <input type="radio" name="payment_method" value="alipay" {% if order.pay_method == 'alipay' %}checked{% endif %} hidden>
                                <div class="d-flex align-items-center">
                                    <i class="bi bi-credit-card payment-method-icon"></i>
                                    <div>
                                        <h6 class="mb-0">支付宝</h6>
                                        <p class="mb-0 text-muted small">推荐支付宝用户使用</p>
                                    </div>
                                </div>
                            </label>
                            
                            <label class="payment-method {% if order.pay_method == 'wechat' %}selected{% endif %}" data-payment="wechat">
                                <input type="radio" name="payment_method" value="wechat" {% if order.pay_method == 'wechat' %}checked{% endif %} hidden>
                                <div class="d-flex align-items-center">
                                    <i class="bi bi-chat-square payment-method-icon"></i>
                                    <div>
                                        <h6 class="mb-0">微信支付</h6>
                                        <p class="mb-0 text-muted small">推荐微信用户使用</p>
                                    </div>
                                </div>
                            </label>
                            
                            <label class="payment-method {% if order.pay_method == 'bank' %}selected{% endif %}" data-payment="bank">
                                <input type="radio" name="payment_method" value="bank" {% if order.pay_method == 'bank' %}checked{% endif %} hidden>
                                <div class="d-flex align-items-center">
                                    <i class="bi bi-bank payment-method-icon"></i>
                                    <div>
                                        <h6 class="mb-0">银行卡支付</h6>
                                        <p class="mb-0 text-muted small">支持大多数银行卡</p>
                                    </div>
                                </div>
                            </label>
                        </form>
                    </div>
                    
                    <div class="text-center">
                        <p><strong>{{ order.get_pay_method_display }}支付</strong></p>
                        
                        <div id="alipay-content" class="payment-content" {% if order.pay_method != 'alipay' %}style="display: none;"{% endif %}>
                            <div class="payment-qrcode">
                                <img src="{% static 'img/payment/alipay_qr.png' %}" alt="支付宝支付" class="img-fluid">
                            </div>
                            <p class="text-muted small">请使用支付宝扫描上方二维码进行支付</p>
                        </div>
                        
                        <div id="wechat-content" class="payment-content" {% if order.pay_method != 'wechat' %}style="display: none;"{% endif %}>
                            <div class="payment-qrcode">
                                <img src="{% static 'img/payment/wechat_qr.png' %}" alt="微信支付" class="img-fluid">
                            </div>
                            <p class="text-muted small">请使用微信扫描上方二维码进行支付</p>
                        </div>
                        
                        <div id="bank-content" class="payment-content" {% if order.pay_method != 'bank' %}style="display: none;"{% endif %}>
                            <div class="payment-instruction">
                                <p>请使用银行卡付款至以下账户：</p>
                                <p>银行：中国银行</p>
                                <p>账号：6225 7601 2345 6789</p>
                                <p>户名：商城系统账户</p>
                                <p class="text-danger">* 请在付款备注中填写您的订单号</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="payment-timer text-center">
                        <p>请在 <span class="timer-text" id="countdown">23:59:59</span> 内完成支付，超时订单将自动取消</p>
                    </div>
                    
                    <div class="payment-actions text-center">
                        <!-- 模拟支付按钮，实际应用中根据支付方式进行不同处理 -->
                        <form method="post" action="{% url 'pay_order' order_id=order.order_id %}">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-primary px-5">
                                模拟支付完成
                            </button>
                        </form>
                        
                        <div class="mt-3">
                            <a href="{% url 'order_detail' order_id=order.order_id %}" class="btn btn-outline-secondary">
                                查看订单
                            </a>
                            <a href="{% url 'index' %}" class="btn btn-outline-primary ms-2">
                                返回首页
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 设置24小时倒计时
        const countdownElement = document.getElementById('countdown');
        const orderTime = new Date(); // 假设订单刚刚创建
        const expireTime = new Date(orderTime.getTime() + 24 * 60 * 60 * 1000); // 24小时后
        
        function updateCountdown() {
            const now = new Date();
            const diff = expireTime - now;
            
            if (diff <= 0) {
                countdownElement.textContent = '00:00:00';
                return;
            }
            
            const hours = Math.floor(diff / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);
            
            const formattedHours = hours.toString().padStart(2, '0');
            const formattedMinutes = minutes.toString().padStart(2, '0');
            const formattedSeconds = seconds.toString().padStart(2, '0');
            
            countdownElement.textContent = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
        }
        
        // 初始更新
        updateCountdown();
        
        // 每秒更新
        setInterval(updateCountdown, 1000);
        
        // 支付方式选择
        const paymentMethods = document.querySelectorAll('.payment-method');
        const paymentContents = document.querySelectorAll('.payment-content');
        const paymentMethodForm = document.getElementById('paymentMethodForm');
        
        // 显示当前选择的支付方式内容
        function showPaymentContent(paymentType) {
            paymentContents.forEach(content => {
                content.style.display = 'none';
            });
            
            const selectedContent = document.getElementById(`${paymentType}-content`);
            if (selectedContent) {
                selectedContent.style.display = 'block';
            }
        }
        
        // 处理支付方式选择
        paymentMethods.forEach(method => {
            method.addEventListener('click', function() {
                // 移除所有选中状态
                paymentMethods.forEach(pm => pm.classList.remove('selected'));
                
                // 设置当前支付方式为选中
                this.classList.add('selected');
                
                // 更新隐藏输入框的值
                const radioInput = this.querySelector('input[type="radio"]');
                radioInput.checked = true;
                
                // 获取支付方式
                const paymentType = this.dataset.payment;
                
                // 使用AJAX提交表单
                const formData = new FormData(paymentMethodForm);
                
                fetch(paymentMethodForm.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // 显示对应的支付内容
                        showPaymentContent(paymentType);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
            });
        });
        
        // 模拟支付按钮
        const payButton = document.getElementById('pay-button');
        if (payButton) {
            payButton.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 显示加载状态
                this.disabled = true;
                this.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 处理中...';
                
                // 提交支付表单
                document.getElementById('payForm').submit();
            });
        }
    });
</script>
{% endblock %}